<template>
  <div class="mainsss">
         <a-modal
        width="90%"
      title="确认核价"
      :visible="visibles"
      :confirm-loading="confirmLoading"
        @ok="handleOk"
      @cancel="handleCancel"
    >
    <template slot="footer">
      <div class="footerDialog">
      <a-button   @click="handleCancel">再想想</a-button>
            <a-button type="primary"  @click="handleOk">提交审核</a-button>
      </div>  
    </template>
          <div class="tips">
          <img src="../../../../assets/image/buyer/warn.png" alt="">
          <span class="tipInfo">提示：请您仔细核对,是否对以下选中商品进行
             【  <span class="need">确认核价</span>   】
              操作 !
          </span>
       </div>
              <div class="left">
            <div class="buttomImg">
              <img src="../../../../assets/image/buyer/total.png" />
            </div>
            <div class="numbers">
              <span class="Ch">寻源单号：</span>
              <span class="normal">4324324324324234（配件寻源）</span>
            </div>
            <div class="button">已核价</div>
          </div>

    <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    :scroll="{ y: 240 }"
  />
    </a-modal>
 <div v-if="partType==0">
      <a-row type="flex" class="table-title">
      <a-col
        :span="10"
        class="textOverflow"
        style="text-align: left; padding-left: 70px"
      >
        平台编码
      </a-col>
      <a-col :span="10" class="textOverflow"> 价格（含税/含运费） </a-col>
      <a-col :span="4" class="textOverflow"> 价格有效期 </a-col>
    </a-row>
    <div class="tableInfo">
        <div class="top">
          <div class="left">
             <div class="checked">
                   <a-checkbox @change="onChange">
   
          </a-checkbox>
             </div>
            <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div>
            <div class="img">
              <img src="../../../../assets/image/buyer/message.png" alt="">
            </div>
            <div class="add">上海市宝山区</div>
          </div>
          <div class="right">
            <div class="price">
              <span class="Ch">已报价： </span>
              <span class="Nu">3/5</span>
            </div>
            <div class="total">
              <span class="Ch">报价合计： </span>
              <span class="Nu">￥550:00</span>
            </div>
          </div>
          <div class="rightImg">
            <img src="../../../../assets/image/buyer/zhiding.png" alt="" />
          </div>
          <div class="imgText">指定</div>
        </div>
        <div class="everyTable">
           <div class="everyTable">
        <div class="tablesInfo">
             <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
            <a href="">查看</a>
          </div>
        </div>
          <div class="everyTableInfo">
                 <div class="check">
                   <a-checkbox @change="onChange">
   
               </a-checkbox>
             </div>
          <div class="codess">
              <span>10年专业发动机大修 | SD01000</span>
           <div class="codeImg">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="partrate">
            <span class="rateNum"> 199.99</span>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
          </div>
          <div class="validity">
            2021/02/30
          </div>
        </div>
        </div>
     
      </div>
      </div>
             <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright" @click="surePrice">
         <a-button>确认核价</a-button>
        </div> 

         </div>
    </div>
 </div>
 <div v-if="partType==1">
      <a-row type="flex" class="table-title">
      <a-col
        :span="6"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
        平台编码
      </a-col>
         <a-col :span="5" class="textOverflow"  style="padding-left: 50px"> 要求规格相似度 </a-col>
      <a-col :span="6" class="textOverflow"> 价格（含税/含运费） </a-col>
      <a-col :span="4" class="textOverflow"> 价格有效期 </a-col>
       <a-col :span="3" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfo">
        <div class="top">
          <div class="left">
             <div class="checked">
                   <a-checkbox @change="onChange">
   
          </a-checkbox>
             </div>
            <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div>
            <div class="img">
              <img src="../../../../assets/image/buyer/message.png" alt="">
            </div>
            <div class="add">上海市宝山区</div>
          </div>
          <div class="right">
            <div class="price">
              <span class="Ch">已报价： </span>
              <span class="Nu">3/5</span>
            </div>
            <div class="total">
              <span class="Ch">报价合计： </span>
              <span class="Nu">￥550:00</span>
            </div>
          </div>
          <div class="rightImg">
            <img src="../../../../assets/image/buyer/zhiding.png" alt="" />
          </div>
          <div class="imgText">指定</div>
        </div>
        <div class="everyTable">
           <div class="everyTable">
        <div class="tablesInfo">
             <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
            <a href="">查看</a>
          </div>
        </div>
          <div class="everyTableInfo">
                 <div class="check">
                   <a-checkbox @change="onChange">
   
               </a-checkbox>
             </div>
          <div class="partOnecodess">
              <span>宝马认证原厂米其 | SD010001</span>
           <div class="codeImg">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="simir">
            3/6
          </div>
          <div class="partOnerate">
            <span class="rateNum"> 199.99</span>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
          </div>
          <div class="partOnevalidity">
            2021/02/30
          </div>
           <div class="typeTwooperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>备注照片</span>
          </div>
        </div>
        </div>
     
      </div>
      </div>
             <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright" @click="surePrice">
         <a-button>确认核价</a-button>
        </div> 

         </div>
    </div>
 </div>
  <div v-if="partType==2">
      <a-row type="flex" class="table-title">
      <a-col
        :span="5"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
        平台编码
      </a-col>
         <a-col :span="4" class="textOverflow" style="padding-left: 30px" > 品质品牌 </a-col>
      <a-col :span="5" class="textOverflow"> 价格（含税/含运费） </a-col>
             <a-col :span="3" class="textOverflow"> 施工费 </a-col>
      <a-col :span="4" class="textOverflow"> 价格有效期 </a-col>
       <a-col :span="3" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfo">
        <div class="top">
          <div class="left">
             <div class="checked">
                   <a-checkbox @change="onChange">
   
          </a-checkbox>
             </div>
            <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div>
            <div class="img">
              <img src="../../../../assets/image/buyer/message.png" alt="">
            </div>
            <div class="add">上海市宝山区</div>
          </div>
          <div class="right">
            <div class="price">
              <span class="Ch">已报价： </span>
              <span class="Nu">3/5</span>
            </div>
            <div class="total">
              <span class="Ch">报价合计： </span>
              <span class="Nu">￥550:00</span>
            </div>
          </div>
          <div class="rightImg">
            <img src="../../../../assets/image/buyer/zhiding.png" alt="" />
          </div>
          <div class="imgText">指定</div>
        </div>
        <div class="everyTable">
           <div class="everyTable">
        <div class="tablesInfo">
             <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
            <a href="">查看</a>
          </div>
        </div>
          <div class="everyTableInfo">
                 <div class="check">
                   <a-checkbox @change="onChange">
   
               </a-checkbox>
             </div>
          <div class="partTwocodess">
              <span>SD010001</span>
           <div class="codeImg">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="partTwosimir">
            品牌 | 博士
          </div>
          <div class="partTworate">
            <span class="rateNum"> 199.99</span>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
          </div>
            <div class="partTwoconstruction">
                60.00
          </div>
          <div class="partTwovalidity">
            2021/02/30
          </div>
           <div class="partTwooperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>备注照片</span>
          </div>
        </div>
        </div>
     
      </div>
      </div>
             <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright" @click="surePrice">
         <a-button>确认核价</a-button>
        </div> 

         </div>
    </div>
 </div>
 <div v-if="partType==3">
      <a-row type="flex" class="table-title">
      <a-col
        :span="5"
        class="textOverflow"
        style="text-align: left; padding-left: 30px"
      >
        平台编码
      </a-col>
         <a-col :span="4" class="textOverflow" style="padding-left: 30px" > 要求规格相似度 </a-col>
      <a-col :span="5" class="textOverflow"> 价格（含税/含运费） </a-col>
             <a-col :span="3" class="textOverflow"> 施工费 </a-col>
      <a-col :span="4" class="textOverflow"> 价格有效期 </a-col>
       <a-col :span="3" class="textOverflow"> 操作 </a-col>
    </a-row>
    <div class="tableInfo">
        <div class="top">
          <div class="left">
             <div class="checked">
                   <a-checkbox @change="onChange">
   
          </a-checkbox>
             </div>
            <div class="name">上海信达雅汽车贸易有限公司</div>
            <div class="zhiding">指定</div>
            <div class="img">
              <img src="../../../../assets/image/buyer/message.png" alt="">
            </div>
            <div class="add">上海市宝山区</div>
          </div>
          <div class="right">
            <div class="price">
              <span class="Ch">已报价： </span>
              <span class="Nu">3/5</span>
            </div>
            <div class="total">
              <span class="Ch">报价合计： </span>
              <span class="Nu">￥550:00</span>
            </div>
          </div>
          <div class="rightImg">
            <img src="../../../../assets/image/buyer/zhiding.png" alt="" />
          </div>
          <div class="imgText">指定</div>
        </div>
        <div class="everyTable">
           <div class="everyTable">
        <div class="tablesInfo">
             <div class="indexs">
           <div class="left">
             <div class="index">1</div>
          <div class="names">燃油滤清器</div>
          <div class="code">
            <span class="codeText">寻源编码: </span>
            <span>ZXBDSJFBS7868878</span>
          </div>
          <div class="number">
            <span class="codeText">数量: </span>
            <span>X4</span>
          </div>
          <div class="quality">
            <span class="codeText">品质要求: </span>
            <span>原厂/品牌</span>
          </div>
           </div>
          <div class="additional">
             <span class="codeText">附加内容: </span>
            <a href="">查看</a>
          </div>
        </div>
          <div class="everyTableInfo">
                 <div class="check">
                   <a-checkbox @change="onChange">
   
               </a-checkbox>
             </div>
          <div class="partThreecodess">
              <span>狗牌经典男士箱包 | SD010001</span>
           <div class="codeImg">
             <img src="../../../../assets/image/buyer/message.png" alt="">
           </div>
          </div>
          <div class="partThreesimir">
            3/6
          </div>
          <div class="partTworate">
            <span class="rateNum"> 199.99</span>
            <div class="rateImg">
                <img src="../../../../assets/image/buyer/rise.png" alt="">
            </div>
             <div class="rateText">
                <span class="SL">税率</span>
               <span class="percentage">14%</span>
             </div>
          </div>
            <div class="partTwoconstruction">
                60.00
          </div>
          <div class="partTwovalidity">
            2021/02/30
          </div>
           <div class="partTwooperation">
            <img src="../../../../assets/image/buyer/viewInfo.png" alt="">
            <span>备注照片</span>
          </div>
        </div>
        </div>
     
      </div>
      </div>
             <div class="footers">
        <div class="allBottomleft">
           <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yelloeFile.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/yellowPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
              <div class="everyLeft">
                <div class="buttomImg">
            <img src="../../../../assets/image/buyer/greenPeople.png">
        </div>
        <div class="paginationBefore">寻源商品下单数（个）： <span class="totals">{{total}}</span> </div>
           </div>
        </div>
        <div class="allBottomright" @click="surePrice">
         <a-button>确认核价</a-button>
        </div> 

         </div>
    </div>
 </div>
  </div>
</template>

<script>
const columns = [
  {
    title: '寻源商品',
    dataIndex: 'name',
    key: 'name',
    width:150,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '品质',
    dataIndex: 'pinzhi',
    key: 'age',
  },
  {
    title: '品牌',
    dataIndex: 'pinpai',
    key: 'address 1',
  },
  {
    title: '编码(平台/供应商/物料)',
    dataIndex: 'code',
    key: 'address 2',
    ellipsis: true,
      width:200,
  },
  {
    title: '价格 (元)',
    dataIndex: 'price',
    key: 'address 3',
        width:150,
  },
    {
    title: '税率',
     dataIndex: 'shiuLv',
    key: 'address 3',
    width:80
  },
    {
    title: '施工费',
    dataIndex: 'construction',
    key: 'address 3',
          width:80,
  },
  {
    title: '价格有效期',
    dataIndex: 'time',
    key: 'address 4',
    ellipsis: true,
        width:150,
    sorter: true,
  },
    {
    title: '供应商',
    dataIndex: 'support',
    key: 'address 4',
    ellipsis: true,
          // width:150,
  },
];

const data = [
  {
    key: '1',
    name: '燃油滤清器-ZXZLB0303032',
    pinzhi: '品质',
    code:'SD010001',
    construction:'50.00',
    pinpai:'博士',
    support:'上海信达雅汽贸有限公司',
    shiuLv:'12',
    price: '390.00 (含税)',
    time:'2021/04/3',
  },
  {
    key: '2',
    name: '燃油滤清器-ZXZLB0303032',
    pinpai:'博士1',
    code:'SD010001',
    support:'上海信达雅汽贸有限公信达雅公司',
        construction:'50.00',
     pinzhi: '品质',
     shiuLv:'12',
     price: '390.00 (含税)',  
       time:'2021/04/33',
  },
  {
    key: '3',
    name: '燃油滤清器-ZXZLB0303032',
     pinpai:'博士2',
     code:'SD010001',
      support:'上海信达雅汽贸有限公信达雅公司',
         construction:'50.00',
     pinzhi: '品质',
     shiuLv:'12',
     price: '390.00 (含税)',
   time:'2021/04/30',
  },
];
export default {
    data(){
        return{
           data,
      columns,
      partType:3,
         visibles:false,
         confirmLoading: false,
        }
    },
    methods:{
           handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibles = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visibles = false;
    },
        surePrice(){
            this.visibles=true
        }
    }
};
</script>

<style lang='less' >
html,
body {
  width: 100%;
}
.mainsss{
  width: 100%;
  height: 100%;
    background-color: rgb(237, 239, 243);
}
.table-title {
  width: 100%;
  margin-top: 10px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 500;
background-color: rgb(248, 249, 250);
  .textOverflow {
    font-weight: bold;
  }
}
   .tips{
     width: 96%;
     height: 40px;
     margin: auto;
     margin-top: 24px;
     background-color: rgb(255, 249, 240);
     border: 1px solid rgb(255, 229, 195);
     border-radius: 2px;
     img{
       width: 16px;
       height: 16px;
       margin-left: 24px;
      // margin-top: 12px;
     }
     .tipInfo{
       margin-left: 8px;
       font-size: 12px;
       line-height: 40px;
      .need{
        color: rgb(255, 155, 29);
      }
     }
   }
       .left {
        //    margin-top: 30px;
        //    margin-left: 24px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .numbers {
        height: 50px;
        line-height: 50px;
        margin-left: 8px;
      }

    }
    .footerDialog{
      margin-right: 40%;
    }
.tableInfo {
  width: 98%;
  height: calc(100vh - 200px);
  margin: auto;
 padding-bottom: 20px;
     margin-top: 8px;
     .top {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: space-between;
      position: relative;
       background-color: white;
      .left {
        width: 70%;
        display: flex;
        align-items: center;
        .checked{
          margin-left: 10px;
          margin-top: 5px;
        }
        .name {
          margin-left: 10px;
          line-height: 48px;
          font-size: 14px;
          font-weight: bold;
        }
        .zhiding {
          margin-left: 4px;
          width: 33px;
          height: 18px;
          border: 1px solid blue;
          color: blue;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
        }
           .img{
          margin-left: 8px;
        }
        .add {
          margin-left: 15px;
          width: 73px;
          height: 14px;
          list-style: 48px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      .right {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        .Ch {
          color: rgb(162, 167, 175);
        }
        .price {
          width: 35%;
          font-size: 12px;
          border-right: 1px solid gray;
        }
        .total {
          margin-left: 16px;
        }
      }
      .rightImg {
        width: 70px;
        height: 60px;
        position: absolute;
        right: 0px;
        top: 30%;
        margin-top: -26px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .imgText {
        width: 70px;
        height: 60px;
        color: white;
        position: absolute;
        right: -25px;
        top: 20%;
        z-index: 100;
        font-size: 15px;
      }
    }
  .everyTable {
    width: 100%;
    background-color: white;
 

    .tablesInfo{
         width: 100%;
          display: flex;
         flex-direction: column;
         background-color: white;
             .indexs {
         width: 100%;
         margin: auto;
          height: 48px;
          background-color: rgb(248, 249, 250);
      display: flex;
      .left{
         width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      }
      .codeText {
        color: rgb(165, 171, 178);
      }
      .index {
        margin-left: 16px;
        width: 20px;
        height: 20px;
        border: 1px solid black;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }
      .names {
        font-weight: bold;
        margin-left: 16px;
      }
      .code {
        height: 15px;
        line-height: 15px;
        width: 220px;
        margin-left: 20px;
        border-right: 1px solid black;
      }
      .number {
        width: 100px;
        height: 15px;
        line-height: 15px;
        margin-left: 16px;
        border-right: 1px solid black;
      }
      .quality {
        margin-left: 15px;
      }
      .additional{
        align-self: center;
          width: 10%;
          margin-right: 16px;
          a{
            color: blue;
          }
      }
    }
    }
    
    .everyTableInfo{
      width: 100%;
      height: 64px;
      border-bottom: 1px solid  rgb(248, 249, 250);
      display: flex;
      align-items: center;
      .check{
        margin-left: 10px;
      }
        .codeImg{
          margin-left: 8px;
          width: 16px;
          height: 16px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .partThreecodess{
            width: 23%;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
        }
        .partTwocodess{
             width: 19%;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
        }
      .partOnecodess{
        width: 22%;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
      }
      .codess{
        width: 35%;
        font-size: 12px;
        color: rgb(116, 124, 136);
        margin-left: 16px;
        display: flex;
      
      }
      .partTwosimir{
        width: 14%;
      }
      .partThreesimir{
         width: 10%;
      }
      .simir{
        text-align: center;
        width: 16%;
      }
      .partOnerate{
         width: 20%;
        display: flex;
        align-items: center;
        margin-left: 40px;
      }
      .partTworate{
         width: 22%;
        display: flex;
        align-items: center;
      }
      .partTwoconstruction{
        width: 12%;
      }
      .partrate{
        width: 50%;
        display: flex;
        align-items: center;
        margin-left: 50px;
        .rateNum{
          font-size: 16px;
          font-weight: bold;
        }
        .rateImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
          border: 1px dashed rgb(116, 124, 136);
        }
        img{
          width: 90%;
          height: 90%;
         margin-bottom: 6px;
         margin-left: 1px;

        }
        .rateText{
          margin-left: 11px;
          width: 70px;
          display: flex;
          justify-content: space-between;
          border: 1px solid rgb(239, 241, 244);
          .SL{
            width: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            border-right: 1px solid  rgb(239, 241, 244);
             color: rgb(116, 124, 136);
          }
          .percentage{
            font-weight: bold;
          }
        }
      }
      .validity{
        // width: 18%;
        font-size: 12px;
           color: rgb(116, 124, 136);
      }
      .partTwovalidity{
            width: 15%;
        font-size: 12px;
        color: rgb(116, 124, 136);
      }
      .partOnevalidity{
       width: 15%;
        font-size: 12px;
        margin-right: 20px;
        margin-left: 40px;
        color: rgb(116, 124, 136);
      }
      .partTwooperation{
        width: 10%;
      }
    }
  }
}
.footers {
  width: 100%;
  height: 80px;
  display: flex;
      justify-content: space-between;
  position: absolute;
  background: white;
  bottom: 0px;
  left: 0px;
  .allBottomleft{
    width: 70%;
    height: 100%;
    margin-left: 15px;
    display: flex;
    .everyLeft{
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .buttomImg{
      margin-bottom: 10px;
      width: 16px;
      height: 16px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .paginationBefore{
      font-size: 12px;
      margin-left: 8px;
        color: rgb(116, 124, 136);
    }
  }
    .allBottomright{
 width: 128px;
 height: 100%;

 button{
  width: 128px;
  height: 100%;
 font-size: 14px;
 color: white;
  background-color:#4F7AFD;
 }
  }
}
</style>